<template>
  <div class="wrapper">
    <transition
      enter-active-class="animate__animated animate__slideInRight animate__faster"
      leave-active-class="animate__animated animate__slideOutRight animate__faster"
    >
      <div class="sidebar" v-show="show">
        <div class="user-info" @click="changeInfo">
          <avatar class="avatar" :imgUrl="this.$store.state.avatar" v-if="this.$store.state.userStatus"/>
          <div v-else>
            <div class="iconfont user-icon">
              &#xe636;
            </div>
          </div>
          <div class="user-name">{{this.$store.state.nickname}}</div>
        </div>
        <div
          class="link-item"
          v-for="item of list"
          :key="item.id"
          :style="{background:item.color}"
          :id="item.id"
          @click="handleLinkClick"
        >
          <span class="iconfont icons" v-html="item.icon"></span>
          {{item.name}}
        </div>
        <div
          class="link-item"
          :style="{background:'#6f599c'}"
          v-if="this.$store.state.userStatus"
          @click="quit"
        >
          <span class="iconfont icons" v-html="'&#xe617;'"></span>
            注销
        </div>
      </div>
    </transition>
    <div class="cover" v-show="show" @click="$emit('sidebar')"></div>
  </div>
</template>

<script>
import Avatar from 'common/avatar/Avatar.vue'
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
  name: 'HomeSideBar',
  props: {
    show: Boolean,
    list: Array,
    name: String
  },
  components: {
    Avatar
  },
  methods: {
    quit () {
      this.$emit('sidebar')
      this.$store.commit('changeUser', {
        username: '未登录',
        userStatus: false
      })
      axios.post('/api/usr/logout').then(function () {
        Toast({
          message: '注销成功',
          position: 'bottom',
          duration: 2000
        })
      })
    },
    changeInfo () {
      this.$emit('infobox')
    },
    handleLinkClick (e) {
      const id = e.target.id
      if (id === '1') {
        if (!this.$store.state.userStatus) {
          this.$emit('userbox')
          return
        }
        this.$router.push('/mymovie')
      } else if (id === '2') {
        if (!this.$store.state.userStatus) {
          this.$emit('userbox')
          return
        }
        this.$router.push('/my')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .wrapper
    .sidebar
      position:fixed
      z-index: 2000
      width: 1.5rem
      top: .6rem
      right: 0
      box-sizing: border-box
      .web-info
        background: #426ab3
        display: flex
        justify-content: space-around
        height: .5rem
        align-items: center
        color: #fff
      .user-info
        background: #fdb933
        display: flex
        height: .5rem
        justify-content: center
        align-items: center
        .user-icon
          width: .50rem
          color: #fff
          font-size: .30rem
          text-align: center
          padding: .15rem 0
        .user-name
          font-size: .20rem
          color: #fff
          padding-left: .1rem
          no-wrap-multi(1)
          text-overflow: ellipsis
      .link-item
        padding-left: .2rem
        height: .5rem
        line-height: .5rem
        align-items: center
        color: #fff
        font-size: .18rem
    .cover
      position: fixed
      top: .6rem
      bottom: 0
      left: 0
      right: 0
      z-index: 1000
      background: rgba(0,0,0,.5)
</style>
